<!--在线预审  -->
<template>
  <div class="table-dialog">
    <el-dialog
      title="在线预审"
      :visible.sync="showViewDialog"
      width="1254px"
      :before-close="handleClose"
      top="12"
      custom-class="dialog-box"
    >
      <el-table :data="threeList" border >
        <el-table-column label="序号" type="index" width="65" align="center"></el-table-column>
        <el-table-column
           label="专家姓名"
          align="center"
          prop="expertName"
          width="296"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="113">
          <template slot-scope="scope">
            <span
              class="icon-state icon-blue"
              v-show="scope.row.status == '2'"
              ><span></span
            ></span>
            <span
              class="icon-state icon-red"
              v-show="scope.row.status === '15'"
              ><span></span
            ></span>
            <span
              class="icon-state icon-green"
              v-show="scope.row.status === '已审批'"
              ><span></span
            ></span>
            <span
              class="icon-state icon-orange"
              v-show="scope.row.status === '未审批'"
              ><span></span
            ></span>
            <span>{{scope.row.status}}</span>
          </template>
        </el-table-column>
        <el-table-column label="批复附件" align="center" prop="approvalDatabaseFile.fileName" width="249">
          <template slot-scope="scope">
            <a :href="scope.row.approvalDatabaseFile?scope.row.approvalDatabaseFile.fileUrl:''" style="color:#3171ee">
              {{scope.row.approvalDatabaseFile?scope.row.approvalDatabaseFile.fileName:''}}
            </a>
          </template>
        </el-table-column>
        <el-table-column
          label="预审结果"
          align="center"
          prop="approvalResult"
          width="249"
        />
        <el-table-column
          label="预审意见"
          align="center"
          prop="approvalOpinion"
          :show-overflow-tooltip="true"
        />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getOnLinePreliminary } from "@/api/manage/manage";
export default {
  name: "ArgumentDialog",
  props: {
    showViewDialog: {
      type: Boolean,
      default: false,
    },
    proId:{
      type: String,
      default:''
    },
    timeData: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 表格参数
      threeList:[],
      queryParams:{}
    };
  },
  watch:{
    showViewDialog(val){
        if(val==true){
            this.getOnLinePreliminaryList()
        }
    },
  },
  methods: {
    getOnLinePreliminaryList(){
      this.queryParams.proId = this.proId
      this.queryParams.createTime = this.timeData,
        getOnLinePreliminary(this.queryParams).then(res=>{
            if(res){
                this.threeList=res
            }
        })
    },
    /** 取消按钮 */
    handleClose() {
      this.$emit("changeShowDialog", "false"); //调用父组件的自定义事件，并传值
    },
    /** 确定按钮 */
    submitForm() {
      this.$emit("changeShowDialog", "false");
    },
  },
};
</script>

<style lang="scss">
.table-dialog{
  // 状态样式
  .icon-state {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    position: relative;
    top: 3.5px;
    margin-right: 10px;
    span {
      display: inline-block;
      margin: 5px;
      width: 7px;
      height: 7px;
      border-radius: 16px;
    }
  }
  .icon-blue {
    background: rgba(49, 113, 238, 0.1);
    span {
      background: #3171ee;
    }
  }
  .icon-red {
    background: rgba(223, 32, 66, 0.1);
    span {
      background: #df2042;
    }
  }
  .icon-green {
    background: rgba(51, 168, 61, 0.1);
    span {
      background: #33a83d;
    }
  }
  .icon-orange {
    background: rgba(223, 130, 45, 0.1);
    span {
      background: #df822d;
    }
  }
}
/* 弹出窗样式 */
.dialog-box {
  .el-dialog__body {
    padding: 24px 48px 24px 48px;
    border-top: 1px solid #ebecef;
    border-bottom: 1px solid #ebecef;
    label {
      font-weight: 400 !important;
    }
    .last-form-item {
      margin-bottom: 0;
    }
    .inline-layout {
      display: flex;
      justify-content: space-between;
    }
  }
  .el-dialog__footer {
    padding: 16px 20px;
  }
  .el-dialog__headerbtn {
    background: url("../../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-dialog__close {
      visibility: hidden;
    }
  }
  .upload-btn {
    // width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: LEFT;
    color: #3171ee;
    img {
      margin-left: 10px;
    }
  }
}
</style>
